<template>
	<navigatorComp title="修改登录密码" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<view class="editPwd_title">
		<view class="editPwd_title_top">
			<view>重置密码</view>
			<view>{{ step }}/2</view>
		</view>
		<view class="editPwd_title_tip">
			为保护您的安全，我们需要验证您的身份，验证通过后即可修改密码
		</view>
	</view>

	<view class="editPwd_box" v-if="step === 1">
		<view class="editPwd_box_item">
			<view class="editPwd_box_item_title display_flex">
				请验证手机号
				<text style="margin-left: 16rpx">+86 {{ form.phoneNumber }}</text>
			</view>
		</view>
		<view class="editPwd_box_item">
			<u--input
				placeholder="请输入验证码"
				v-model.trim="form.verificationCode"
				fontSize="28rpx"
				color="#fff"
				border="none"
				inputAlign="left"
				maxlength="4"
				placeholderStyle="color:#999999;font-size:28rpx;"
			></u--input>
			<u-code
				unique-key="A"
				class="get_code"
				ref="uCodeRef"
				@change="codeChange"
				start-text="获取验证码"
				changeText="Xs"
			></u-code>
			<text @tap="getCode" :text="tips" class="get_code">{{ tips }}</text>
		</view>
	</view>

	<view class="editPwd_box" v-if="step === 2">
		<view class="editPwd_box_item">
			<view class="editPwd_box_item_title display_flex">新密码</view>
			<view class="display_flex">
				<u--input
					focus
					placeholder="请输入新密码"
					v-model.trim="form.pwd"
					fontSize="28rpx"
					color="#fff"
					border="none"
					inputAlign="right"
					maxlength="16"
					placeholderStyle="color:#999999;font-size:28rpx;"
				></u--input>
			</view>
		</view>
		<view class="editPwd_box_item">
			<view class="editPwd_box_item_title display_flex">确认密码</view>
			<view class="display_flex">
				<u--input
					focus
					placeholder="请再次输入新密码"
					v-model.trim="form.newPwd"
					fontSize="28rpx"
					color="#fff"
					border="none"
					inputAlign="right"
					maxlength="16"
					placeholderStyle="color:#999999;font-size:28rpx;"
				></u--input>
			</view>
		</view>
	</view>
	<view v-show="step === 2" class="editPwd_tip">
		<view class="editPwd_tip_item">
			<u-icon
				name="checkmark-circle-fill"
				size="18"
				:color="pwdSafe.safe1 ? '#F3E0BB' : '#999999'"
				style="margin-right: 8rpx"
			></u-icon>
			密码由8-16位数字、字母或符号组成
		</view>
		<view class="editPwd_tip_item">
			<u-icon
				name="checkmark-circle-fill"
				size="18"
				:color="pwdSafe.safe2 ? '#F3E0BB' : '#999999'"
				style="margin-right: 8rpx"
			></u-icon>
			至少含两种以上字符
		</view>
	</view>

	<view class="editPwd_btn display_flex">
		<myButton
			bgcColor="none"
			:name="step === 1 ? '下一步' : '确定'"
			width="400rpx"
			@clickBtn="nextStep"
		></myButton>
		<view v-if="step === 2" style="margin-top: 24rpx">
			安全提示：新密码请勿与旧密码过于相似
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, watch } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import myButton from '@/components/button/index.vue';
import { getCodeApi } from '@/API/login/login.js';
import MineApi from '@/API/mine/index.js';
import Md5 from 'js-md5'
import store from '@/store/index.js';

const mineApi = new MineApi();

const form = reactive({
	phoneNumber: store.state.userInfo.userInfo.phoneNumber,
	verificationCode: '',
	pwd: '',
	newPwd: ''
});
const tips = ref('');
const uCodeRef = ref(null);
const codeChange = async (text) => {
	tips.value = text;
};
const step = ref(1); //第一步
const pwdSafe = reactive({
	safe1: false,
	safe2: false
});
const timestamp = ref(0)  //认证返回的时间戳
const pwdReg =
	/^(?=.*[0-9])(?=.*[a-zA-Z]).{8,16}$|^(?=.*[0-9])(?=.*[^a-zA-Z0-9]).{8,16}$|^(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}$/;

// 发送验证码
const getCode = () => {
	if (uCodeRef.value.canGetCode) {
		// 模拟向后端请求验证码
		uni.showLoading({
			title: '正在获取验证码'
		});
		// console.log(formData.phoneNumber)
		setTimeout(async () => {
			uni.hideLoading();
			let rst = await getCodeApi({
				phoneNumber: form.phoneNumber,
				smsType: '4' //1:注册，2:登录，3:修改密码，4:身份认证，5:更换手机号
			});
			if (rst.data.code == 0) {
				// 这里此提示会被start()方法中的提示覆盖
				uni.showToast({
					title: rst.data.msg,
					icon: 'success',
					duration: 1000
				});
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			} else {
				uni.showToast({
					title: rst.data.msg,
					icon: 'none',
					duration: 1000
				});
			}
		}, 2000);
	} else {
		uni.showToast({
			title: '倒计时结束后再发送',
			icon: 'error',
			duration: 1000
		});
	}
};

watch(
	() => form.pwd,
	(newValue) => {
		if (/.{8,16}/.test(newValue)) {
			pwdSafe.safe1 = true;
		} else {
			pwdSafe.safe1 = false;
		}
		
		if (pwdReg.test(newValue)) {
			pwdSafe.safe2 = true;
		} else {
			pwdSafe.safe2 = false;
		}
	}
);

const validate = () => {
	if (step.value === 1) {
		let codeReg = /\d{4}/;
		if (!codeReg.test(form.verificationCode)) {
			uni.showToast({
				title: '请输入正确的验证码',
				icon: 'none',
				duration: 1000
			});
			return false;
		}
	} else {
		if (!form.pwd) {
			uni.showToast({
				title: '请输入新密码',
				icon: 'none',
				duration: 1000
			});
			return false;
		} else if (!pwdReg.test(form.pwd)) {
			uni.showToast({
				title: '密码不符合要求，请重新输入',
				icon: 'none',
				duration: 1000
			});
			return false;
		} else if (!form.newPwd) {
			uni.showToast({
				title: '请输入确认密码',
				icon: 'none',
				duration: 1000
			});
			return false;
		} else if (form.newPwd != form.pwd) {
			uni.showToast({
				title: '两次密码输入不一致',
				icon: 'none',
				duration: 1000
			});
			return false;
		}
	}
	return true
};

/**
 * 下一步
 */
const nextStep = () => {
	if (!validate()) {
		return;
	}
	if (step.value === 1) {
		//第一步
		mineApi
			.identityAuthentication({
				phoneNumber: form.phoneNumber,
				verificationCode: form.verificationCode
			})
			.then((res) => {
				if (res.code === 0) {
					step.value = 2;
					timestamp.value = res.data.timestamp
				}
			});
	} else {
		//第二步
		mineApi.personalChangePassword({
			newPassword:Md5(form.pwd),
			timestamp:timestamp.value
		}).then((res)=>{
			if (res.code === 0) {
				uni.showToast({
					title:'修改密码成功，请重新登录'
				})
				uni.reLaunch({
					url:'/pages/login/login'
				})
			}
		})
	}
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.editPwd_title {
	margin: 42rpx 32rpx 0 32rpx;

	.editPwd_title_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 400;
		font-size: 36rpx;
		color: #ffffff;
		line-height: 42rpx;
	}

	.editPwd_title_tip {
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
		line-height: 26rpx;
		margin-top: 12rpx;
	}
}

.editPwd_box {
	padding: 40rpx 32rpx;
	box-sizing: border-box;
	margin: 40rpx 32rpx 0 32rpx;
	background: #292b2a;
	border-radius: 8rpx;

	.editPwd_box_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;
		width: 100%;

		&:last-child {
			margin-bottom: 0;
		}

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 8rpx;
		}

		.editPwd_box_item_title {
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 33rpx;
		}
		.get_code {
			color: #f3e0bb;
			font-size: 28rpx;
			float: right;
		}
	}
}

.editPwd_btn {
	width: 100%;
	margin-top: 168rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	line-height: 28rpx;
	flex-direction: column;
}

.editPwd_tip {
	margin-top: 24rpx;

	.editPwd_tip_item {
		font-weight: 400;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 28rpx;
		margin-bottom: 12rpx;
		display: flex;
		align-items: center;
		margin-left: 32rpx;
	}
}
</style>
